<!--
 * @Description: 系统用户管理
 * @Author: 秦福凯
 * @Date: 2025-10-14 15:04:13
 * @LastEditTime: 2025-10-28 16:52:08
-->

<template>
  <div class="u-search-header" >
    <el-form :model="search">
      <el-form-item label="模糊查询" class="u-f-fl" label-width="88px">
        <u-input v-model="search.param.search.searchParam"></u-input>
      </el-form-item>

      <el-form-item  class="u-f-fl" label-width="28px">
        <u-button type="primary" icon="Search" @click="getSearch">查询</u-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="u-search-container">
    <div class="u-h-100">
      <div class="u-btns-box">
        <u-button type="primary" plain icon="Plus" @click="add">新增</u-button>
      </div>
        <u-table @editBtnsClick="editBtnsClick" v-loading="tabLaoding" :colunm="colunm" :data="TabData"  @selection-change="(data) => TabSelData.splice(0, TabSelData.length, ...data)"></u-table>
        <div class="u-common-pagination">
          <u-page-nation @pagination="paginationE" :total="total" :page="search.param.page"></u-page-nation>
        </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <u-dialog :show="dialogShow" :title='dialogTitle' @close="dialogClose" width="70%"  @submit="submit">
    <u-form v-if="refrahForm" ref="refform" v-loading="formloading" :element="formList" :form="form" >
       <template #password>
        <u-input show-password type="password" v-model="form.password" @change="changePassword"></u-input>
        <div style="margin-top: 8px;" >
          密码强弱:<el-segmented v-model="passwordStrange" :options="['弱','中','强']" disabled  size="default" />
        </div>
        <!-- <div style="margin-top: 8px;color: red;" >
          密码规则: 不能低于12位,密码中必须包含:大写字母、小写字母、数字、特殊字符(~!@#$^& +=|/?-)组成
        </div> -->
      </template>
    </u-form>
   </u-dialog>
</template>

<script setup>
import { ref, reactive,onMounted} from 'vue'
// 导入接口地址
import busi_api from '@/api/busiApi'

// 导入公共数据
import { useTecDataStore } from "@/store/teachinginstrument/index.js";
// 导入分页相关混合
import {PageMethod} from '@/components/common/mixin.ts'

// 公共数据取值
const TecDataStore = useTecDataStore()
const {page,pageSize,pageChane,} = PageMethod()

onMounted(() => {
  getSearch()
})

// 新增
function add(){
  form.id = ''
  formList = formList2
  dialogShow.value = true
  refrahForm.value = false
  nextTick(() =>{
    refrahForm.value = true
  })
}

let refrahForm = ref(true)
// 查询相关变量
let search = reactive({
  ...TecDataStore.comObj,
  param:{
    page:page,
    pageSize:pageSize,
    search:{
      searchParam:'',
    }
  }
})
let tabLaoding = ref(false)
let total = ref(0)
let colunm = reactive([
  {type:'selection'},
  {type:'index',label:'编码',width:60},
  {label:'昵称',key:'nickName',minWidth:120},
  {label:'账号',key:'userAccount',minWidth:120},
    {label:'操作',key:'cz',minWidth:120,ctype:'edit',fixed:'right',
    data:[
      {label:'编辑',icon:'Edit',link:true},
      {label:'删除',icon:'Delete',link:true},
      {label:'修改密码',icon:'',link:true},

    ]
  },
])
let TabData = reactive([])

// 查询
function getSearch(){
  tabLaoding.value = true
  busi_api.Adminpage(search).then(res =>{
    tabLaoding.value = false
    if(res.data.code == 200){
      TabData = res.data.data.records
      total.value = res.data.data.total
      TabData.forEach(item =>{
      })
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}

// 分页组件切换
function paginationE(val){
  search.param.page = val.page
  search.param.pageSize = val.limit
  getSearch()
}

// 表格选择的数据
let TabSelData = reactive([])
function tabSel(val){
  TabSelData = val
}




// 表格点击事件
function editBtnsClick(label,row){
  if(label == '删除'){
    deleteList(label,row)
  }
  if(label == '编辑'){
    dialogTitle.value = '修改用户'
    formList = formList3
    dialogShow.value = true
    getEditData(row)
  }
    if(label == '修改密码'){
      dialogTitle.value = '修改密码'
      formList = formList2
      dialogShow.value = true
      getEditData(row)
  }
}

function deleteList(label,row){
    ElMessageBox.confirm(
    '确认删除选中数据?删除将不可恢复请谨慎操作',
    '系统提示',
    {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    }
    ).then(() =>{
      busi_api.deleteAdminUser({...TecDataStore.comObj,param:row.id}).then(res =>{
        if(res.data.code == 200){
          ElMessage.success('删除成功!')
          getSearch()
        }else{
          ElMessage.warning(res.data.msg)
        }
    })
    })
}

// 获取回显数据
function getEditData(val){
  for(let i in form){
    if(val[i]){
      form[i] = val[i]
    }
  }
}

// 弹窗相关参数
let dialogShow = ref(false)
let dialogTitle = ref('弹窗标题')

// 弹窗里的表单参数
let form = reactive({
  id:"",
  userAccount:'',
  nickName:'',
  password:'',
  password2:'',

})
let formList = reactive([
 
])

let formList2 = reactive([
 {label:'昵称:',key:'nickName',type:'input',placeholder:"",sp:12,re:true},
  {label:'账号:',key:'userAccount',type:'input',placeholder:"",sp:12,re:true},
  {label:'密码:',key:'password',type:'slot',placeholder:"",sp:12,re:true},
  {label:'确认密码:',key:'password2',type:'password',placeholder:"",sp:12,re:true,rule:[
    { validator: (rules,value,callback) =>{
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value !== form.password) {
        callback(new Error("两次输入密码不一致请重新输入"))
        // form.password2 = ''
      } else {
        callback()
      }
    }, trigger: 'blur' }
  ]},
])
  let formList3 = reactive([
    {label:'昵称:',key:'nickName',type:'input',placeholder:"",sp:12,re:true},
    {label:'账号:',key:'userAccount',type:'input',placeholder:"",sp:12,re:true},
  ])

let strength = ref(0)
function changePassword(v){
   strength.value = passwordStrength(v)
   if(strength.value <= 2){
    passwordStrange.value = '弱'
   }
   if(strength.value === 4){
    passwordStrange.value = '中'
   }
   if(strength.value  > 4){
    passwordStrange.value = '强'
   }
 
}

// 验证密码强弱
let passwordStrange = ref('弱')
const passwordStrength = (password) => {
  let strength = 0;
  if (password.length >= 12) strength += 1;
  if (password.match(/[a-z]/)) strength += 1;
  if (password.match(/[A-Z]/)) strength += 1;
  if (password.match(/[0-9]/)) strength += 1;
  if (password.match(/[^a-zA-Z0-9]/)) strength += 1;
  return strength;
  };
const refform = ref(null)
let formloading = ref(false)
let imgsrc = ref(null)

// 弹窗提交
function submit(){
  refform.value.soform.validate((vali) =>{
    if(!vali){
      ElMessage.warning('请将表单填写完整!')
    }else{
      let parmas = {
        ...TecDataStore.comObj,
        param:{
          ...JSON.parse(JSON.stringify(form)),
        }
      }
     const url = parmas.param.id == '' || parmas.param.id == undefined ? 'addAdminUser' : 'updateAdminUser'
      formloading.value = true
      busi_api[url](parmas).then(res =>{
        formloading.value = false
        if(res.data.code == 200){
          ElMessage.success(res.data.msg)
          dialogShow.value = false
          getSearch()
        }else{
          ElMessage.warning(res.data.msg)
        }
    })
    }
  })
}

// 弹窗关闭
function dialogClose(){
  // 清理表单缓存
  dialogShow.value = false
  // refform.value.soform.resetFields()
  // console.log(refform.value)
  for(let i in form){
    form[i] = ''
  }
}

</script>
<style lang='scss' scoped>

</style>